<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="个人信息" name="personalInfo">
        <div class="mainDiv">
          <el-row>
            <el-col :offset="4" :span="8">
              <img src="https://www.caicool.cn:443/stu/statics/web/images/default_head.png" alt="" class="userhead">
            </el-col>
            <el-col :span="8">
              <div class="info">
                <label class="form-label">学生姓名：</label>
                <div class="form-mid">
                  <span class="span-color">李冰</span>
                  <el-tag type="primary" size="mini">正常</el-tag>
                  <el-tag type="info" size="mini">未认证</el-tag>
                </div>
              </div>
              <div class="info">
                <label class="form-label">学生账号：</label>
                <div class="form-mid">
                  <span class="span-color">gz2020000110</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="4" :span="8">
              <div class="info">
                <label class="form-label">所在学院：</label>
                <div class="form-mid">
                  <span class="span-color">药学院</span>
                </div>
              </div>
              <div class="info">
                <label class="form-label">所在班级：</label>
                <div class="form-mid">
                  <span class="span-color">药物制剂2020级</span>
                  <el-button type="primary" size="mini" class="my-button" @click="applyAdjust">申请调班</el-button>
                </div>
              </div>
              <div class="info">
                <label class="form-label">手机号：</label>
                <div class="form-mid">
                  <el-button type="primary" size="mini" class="my-button" @click="bindPhone">绑定手机</el-button>
                </div>
              </div>
              <div class="info">
                <label class="form-label">班干：</label>
                <div class="form-mid">
                  <el-switch
                    v-model="value"
                    active-color="rgb(102, 177, 255)"
                    inactive-color="rgb(210, 210, 210)"
                    @change="classCadre">
                  </el-switch>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info">
                <label class="form-label">所在专业：</label>
                <div class="form-mid">
                  <span class="span-color">药物制剂</span>
                </div>
              </div>
              <div class="info">
                <label class="form-label">电子邮件：</label>
                <div class="form-mid">
                  <span class="span-color">123@qq.com</span>
                </div>
              </div>
              <div class="info">
                <label class="form-label">微信：</label>
                <div class="form-mid">
                  <span class="span-color">未绑定</span>
                  <el-button type="primary" size="mini" class="my-button" @click="bindWeChat">绑定</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="密码修改" name="changePassword">
        <div class="mainDiv">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :offset="8" :span="8">
                <el-form-item label="原始密码">
                  <el-input v-model="form.oldPassword" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="8" :span="8">
                <el-form-item label="新密码">
                  <el-input v-model="form.newPassword" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="8" :span="8">
              <el-form-item label="重复输入">
                <el-input v-model="form.checkPassword" />
              </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="8">
                <el-form-item>
                  <el-button type="primary" size="small" @click="changePassword()">修改密码</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 申请调班对话框 -->
    <el-dialog
      title="申请调班"
      :visible.sync="adjustDialogVisible"
      @closed="applyDialogClosed"
      width="50%">
      <el-row>
        <el-col :span="8">
          <el-input v-model="classSearchValue" placeholder="请输入班级名称" />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="classSearch" style="margin-left: 15px">搜索</el-button>
        </el-col>
      </el-row>
        <el-table :data="filClassList" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange" ref="classTableRef">
          <el-table-column type="index" />
          <el-table-column prop="code" label="班级代码" />
          <el-table-column prop="name" label="班级名称" />
          <el-table-column prop="project" label="专业名称" />
          <el-table-column prop="college" label="学院名称" />
        </el-table>
        <el-pagination
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
          :current-page="queryForm.pageNum"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adjustDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdjustClass">确定申请</el-button>
      </span>
    </el-dialog>
    <!-- 绑定手机号对话框 -->
    <el-dialog
      title="绑定手机号"
      :visible.sync="phoneBindDialogVisible"
      @closed="phoneBindDialogClosed"
      width="50%">
      <el-form ref="phoneFormRef" :model="phoneForm" label-width="80px">
        <el-row>
          <el-col :offset="4" :span="8">
            <el-form-item label="手机" prop="phone">
              <el-input v-model="phoneForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-row>
              <el-col :offset="4" :span="8" prop="code">
                <el-form-item label="验证码">
                  <el-input v-model="phoneForm.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" style="margin-left: 15px" @click="sendCode">发送验证码</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="phoneBindDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBindPhone">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 绑定微信对话框 -->
    <el-dialog
      title="绑定微信（用于接受通知）"
      :visible.sync="WeChatBindDialogVisible"
      width="50%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="WeChatBindDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="WeChatBindDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'personalInfo',
      // 是否为班干
      value: true,
      // 个人信息
      form: {},
      phoneForm: {},
      // 查询班级列表条件
      queryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      // 班级信息总条数
      total: 0,
      // 申请调班的对话框状态
      adjustDialogVisible: false,
      // 绑定手机号的对话框状态
      phoneBindDialogVisible: false,
      // 绑定微信对话框状态
      WeChatBindDialogVisible: false,
      // 班级信息列表
      classList: [
        { 'code': 'CC2019100000', 'name': '19财管1班', 'project': '财务管理', 'college': '财经系' },
        { 'code': 'CC2019100001', 'name': '19财管2班', 'project': '财务管理1', 'college': '财经系1' },
        { 'code': 'CC2019100002', 'name': '19财管3班', 'project': '财务管理2', 'college': '财经系2' },
        { 'code': 'CC2019100003', 'name': '19财管4班', 'project': '财务管理3', 'college': '财经系3' },
        { 'code': 'CC2019100004', 'name': '19财管5班', 'project': '财务管理4', 'college': '财经系4' },
        { 'code': 'CC2019100005', 'name': '19财管6班', 'project': '财务管理5', 'college': '财经系5' },
        { 'code': 'CC2019100006', 'name': '19财管7班', 'project': '财务管理6', 'college': '财经系6' },
        { 'code': 'CC2019100007', 'name': '19财管8班', 'project': '财务管理7', 'college': '财经系7' },
      ],
      // 搜索框绑定的查询条件
      classSearchValue: '',
    }
  },
  computed: {
    // 过滤的班级信息列表
    filClassList() {
      let arr = this.classList.filter((p) => {
        return p.name.indexOf(this.classSearchValue) !== -1
      })
      this.total = arr.length
      return arr
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取班级信息
    getList() {

    },
    // 申请调班
    applyAdjust() {
      this.adjustDialogVisible = true
    },
    // 绑定手机
    bindPhone() {
      this.phoneBindDialogVisible = true
    },
    // 班干改变
    classCadre(val) {
      console.log(val);
    },
    // 绑定微信
    bindWeChat() {
      this.WeChatBindDialogVisible = true
    },
    // 搜索班级
    classSearch() {
    },
    // 管理列表选中时触发的事件
    handleCurrentChange(row) {
      console.log(row);
    },
    // 当前页面修改
    handlePageChange(val) {
      this.queryForm.pageNum = val
    },
    // 页面条数修改
    handlePageSizeChange(val) {
      this.queryForm.pageSize = val
    },
    resetClass() {
      this.classSearchValue = ''
      this.$refs.classTableRef.setCurrentRow()
    },
    resetPhone() {
      this.$refs.phoneFormRef.resetFields()
    },
    // 调整班级对话框关闭
    applyDialogClosed() {
      this.resetClass()
    },
    // 调整班级的修改
    submitAdjustClass() {
      this.adjustDialogVisible = false
    },
    // 关闭绑定手机对话框
    phoneBindDialogClosed() {
      this.resetPhone()
    },
    // 提交手机绑定
    submitBindPhone() {

    },
    // 修改密码
    changePassword() {

    },
    // 发送验证码
    sendCode() {

    }
  }
}
</script>

<style scoped>
.el-tabs {
  font-size: 14px;
}

.mainDiv {
  padding: 30PX 10px;
}

.userhead {
    width: 100px;
    cursor: pointer;
    padding-left: 100px;
}

.info {
  height: 38px;
  width: 100%;
  margin-bottom: 15px;
}

.form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}

.form-mid {
    float: left;
    display: block;
    line-height: 38px;
}

.span-color {
    color: #999;
    margin-right: 5px;
}

.el-tag {
  margin-right: 5px;
}

.my-button {
  padding: 4px;
}
</style>
